<template name="ap-tag">
	<view class="x-tag-all-wrapper" :style="{'background-color' : 'rgba('+ r + ',' + g + ',' + b + ', 0.2 )'}">
		<i class="material-icons x-tag-icon" v-if="icon!=''" v-html="icon"></i>
		<text class="x-tag-text" :style="{'font-size' : size , color : 'rgb('+ r + ',' + g + ',' + b + ')' }">{{value}}</text>
	</view>
</template>

<script>
	/**
	 * ap-tag TAG信息
	 * @description 一个带颜色背景的TAG标签信息
	 * @property {String} value = "" 标签显示的内容
	 * @property {String} icon = "" 标签显示的ICON(文本前，且仅支持Unicode字符编码字体图标) 
	 * @property {String} size = "26rpx" 标签内容文字大小
	 * @property {String} r,g,b,a = '' 标签的主色调，背景色会自动根据颜色加上一定的透明度
	 */
	
	export default {
		name:"ap-tag",
		data() {
			return {
				
			};
		},
		props:{
			value:{
				type:String,
				default(){
					return '';
				}
			},
			icon:{
				type:String,
				default(){
					return '';
				}
			},
			size:{
				type:String,
				default(){
					return "26rpx";
				}
			},
			r:{
				type:String,
				default(){
					return '0';
				}
			},
			g:{
				type:String,
				default(){
					return '122';
				}
			},
			b:{
				type:String,
				default(){
					return '255';
				}
			},
			a:{
				type:String,
				default(){
					return '1';
				}
			}
			
		}
	}
</script>

<style>
	.x-tag-all-wrapper{
		display: inline-flex;
		border-radius: 18rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		justify-content: center;
		align-items: center;
	}
	
	.x-tag-icon{
		font-size: 35rpx;
		color: #2f8fee;
		margin-right: 8rpx;
	}
	
	.x-tag-text{
		font-weight: bold;
		color: #2f8fee;
	}
</style>
